<template>
  <ElCard shadow="never">
    <ElForm :model="formData" label-width="80px">
      <ElRow :gutter="20">
        <ElCol :xs="24" :sm="12" :md="8" :lg="6">
          <ElFormItem label="员工姓名">
            <ElInput
              v-model="formData.employeeName"
              placeholder="请输入员工姓名"
              clearable
              @keyup.enter="handleSearch"
            />
          </ElFormItem>
        </ElCol>

        <ElCol :xs="24" :sm="12" :md="8" :lg="6">
          <ElFormItem label="手机号码">
            <ElInput
              v-model="formData.employeePhone"
              placeholder="请输入手机号码"
              clearable
              @keyup.enter="handleSearch"
            />
          </ElFormItem>
        </ElCol>

        <ElCol :xs="24" :sm="12" :md="8" :lg="6">
          <ElFormItem label-width="0">
            <ElSpace wrap>
              <ElButton type="primary" @click="handleSearch" v-ripple>
                <template #icon>
                  <el-icon><Search /></el-icon>
                </template>
                搜索
              </ElButton>
              <ElButton @click="handleReset" v-ripple>
                <template #icon>
                  <el-icon><Refresh /></el-icon>
                </template>
                重置
              </ElButton>
            </ElSpace>
          </ElFormItem>
        </ElCol>
      </ElRow>
    </ElForm>
  </ElCard>
</template>

<script setup lang="ts">
  import { Search, Refresh } from '@element-plus/icons-vue'

  interface SearchForm {
    employeeName?: string
    employeePhone?: string
  }

  interface Props {
    modelValue?: SearchForm
  }

  interface Emits {
    (e: 'update:modelValue', value: SearchForm): void
    (e: 'search', value: SearchForm): void
    (e: 'reset'): void
  }

  const props = withDefaults(defineProps<Props>(), {
    modelValue: () => ({})
  })

  const emit = defineEmits<Emits>()

  // 表单数据
  const formData = reactive<SearchForm>({
    employeeName: undefined,
    employeePhone: undefined
  })

  // 监听外部数据变化
  watch(
    () => props.modelValue,
    (val) => {
      Object.assign(formData, val)
    },
    { immediate: true, deep: true }
  )

  // 搜索
  const handleSearch = () => {
    const searchData = { ...formData }
    emit('update:modelValue', searchData)
    emit('search', searchData)
  }

  // 重置
  const handleReset = () => {
    Object.assign(formData, {
      employeeName: undefined,
      employeePhone: undefined
    })
    emit('update:modelValue', formData)
    emit('reset')
  }
</script>

<style lang="scss" scoped>
  :deep(.el-form-item) {
    margin-bottom: 0;
  }
</style>
